<template>
  <!-- 订单详情 -->
  <view class="content">
    <!-- 网点信息 -->
    <view class="ui-list fz26 bg-white">
      <view
        class="fff item flex flex-x-between flex-y-center mb20"
        :class="
          orderStatus[state.dataSource.orderStatus]
            ? orderStatus[state.dataSource.orderStatus][1]
            : ''
        "
      >
        <view>{{
          orderStatus[state.dataSource.orderStatus]
            ? orderStatus[state.dataSource.orderStatus][0]
            : ""
        }}</view>
        <view
          >共使用{{ $filter.timeDifference(state.dataSource.usedTime) }}</view
        >
      </view>

      <view class="item flex flex-y-center">
        <view class="flex1">所在网点</view>
        <view>{{ state.dataSource.networkName }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">使用设备</view>
        <view
          >{{ state.dataSource.subject }}
          {{ state.dataSource.deviceName }}</view
        >
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">板号</view>
        <view>{{ state.dataSource.version }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">门锁</view>
        <view>{{ state.dataSource.lockNum }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">设备别名</view>
        <view>{{ state.dataSource.cellOtherName }}</view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="ui-list mt40 fz26 bg-white">
      <view class="item flex flex-y-center">
        <view class="flex1">订单号</view>
        <view @click="copyData(state.dataSource.orderId)">{{
          state.dataSource.orderId
        }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">用户账户</view>
        <view>{{ state.dataSource.wechatName }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">计费方式</view>
        <view>{{
          $filter.filterDictText(
            state.billingMethodOptions,
            state.dataSource.chargeType
          )
        }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">订单金额</view>
        <view class="main-theme-color"
          >￥{{ $filter.formatYuan(state.dataSource.orderAmount) }}</view
        >
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">支付金额</view>
        <view class="main-theme-color"
          >￥{{ $filter.formatYuan(state.dataSource.actualAmount) }}</view
        >
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">订单来源</view>
        <view>{{
          $filter.filterDictText(
            state.orderOriginOptions,
            state.dataSource.orderOrigin
          )
        }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">开始时间</view>
        <view>{{ state.dataSource.createTime }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">结束时间</view>
        <view>{{ state.dataSource.endTime }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">订单状态</view>
        <view>{{
          $filter.filterDictText(
            state.orderStatusOptions,
            state.dataSource.orderStatus
          )
        }}</view>
      </view>
    </view>

    <!-- 用户寄存信息 -->
    <view class="ui-list mt40 fz26 bg-white">
      <view class="item flex flex-y-center">
        <view class="flex1">寄存手机号码</view>
        <view>{{ state.dataSource.storageMobile }}</view>
      </view>
      <view class="item flex flex-y-center">
        <view class="flex1">寄存密码</view>
        <view>{{ state.dataSource.storagePwd }}</view>
      </view>
    </view>

    <!-- 结算流水 -->
    <view class="ui-list mt40 fz26 bg-white">
      <view
        class="item flex flex-y-center bold"
        v-if="state.dataSource.settlements"
      >
        <view class="flex1">结算流水</view>
        <view>{{ state.dataSource.settlements.length }}条</view>
      </view>
      <view
        class="mb10"
        v-for="item in state.dataSource.settlements"
        :key="item.id"
      >
        <view class="item flex flex-y-center gray9">
          <view class="flex1">结算流水号</view>
          <view @click="copyData(item.sequenceId)">{{ item.sequenceId }}</view>
        </view>
        <view class="item flex flex-y-center gray9">
          <view class="flex1">支付流水号</view>
          <view @click="copyData(item.orderId)">{{ item.orderId }}</view>
        </view>
        <view class="item flex flex-y-center gray9">
          <view class="flex1">支付方式</view>
          <view>{{
            $filter.filterDictText(state.chargeTypeOptions, item.chargeType)
          }}</view>
        </view>
        <view class="item flex flex-y-center gray9">
          <view class="flex1">支付金额</view>
          <view class="main-theme-color"
            >￥{{ $filter.formatYuan(item.settlementAmount) }}</view
          >
        </view>
        <view class="item flex flex-y-center gray9">
          <view class="flex1">支付状态</view>
          <view>{{
            $filter.filterDictText(state.orderStatusOptions, item.paymentStatus)
          }}</view>
        </view>
        <view class="item flex flex-y-center gray9">
          <view class="flex1">支付时间</view>
          <view>{{ item.paymentTime }}</view>
        </view>
      </view>
    </view>

    <!-- 开门记录 -->
    <view class="ui-list mt40 fz26 bg-white">
      <view class="item flex flex-y-center bold"
        ><view class="flex1">开门记录</view></view
      >
      <view
        class="item flex flex-y-center gray9"
        v-for="item in state.dataSource.openHistory"
        :key="item.id"
      >
        <view class="flex1">{{ item.createTime }}</view>
        <view>{{
          $filter.filterDictText(state.openTypeOptions, item.openType)
        }}</view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="fixed-btn-box t-c">
      <view
        class="btn-box flex flex-x-around flex-y-center bg-white fz26 gray9"
      >
        <view class="item" @click="openLock">
          <sw-icons icon="icon-mima1" size="34" color="#096"></sw-icons>
          <view class="mt10">开锁</view>
        </view>
        <view class="item" @click="checkStatus">
          <sw-icons icon="icon-tanhao" size="34" color="#ffa200"></sw-icons>
          <view class="mt10">查询状态</view>
        </view>
        <view class="item" @click="callPhone">
          <sw-icons icon="icon-shouji" size="34" color="#487fff"></sw-icons>
          <view class="mt10">联系用户</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  orderDetails,
  initDictOptions,
  orderCheckStatus,
  openCellById,
} from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();
const state = reactive({
  id: "",
  isSend: false,
  dataSource: {},
  orderStatusOptions: [],
  billingMethodOptions: [],
  orderOriginOptions: [],
  openTypeOptions: [],
  chargeTypeOptions: [],
});

const orderStatus = {
  0: ["未支付", "bg-green"],
  1: ["进行中", "bg-green"],
  2: ["已支付", "bg-red"],
  3: ["已取消", "bg-gray9"],
  4: ["退款中", "bg-red"],
  5: ["已退款", "bg-red"],
  6: ["已完成", "bg-blue"],
  7: ["已超时", "bg-red"],
};

// 初始化数据字典
const initDictConfig = () => {
  //初始化字典 - 订单状态
  initDictOptions("orderStatus", {}, { showLoad: false }).then((res) => {
    if (res.success) {
      state.orderStatusOptions = res.result;
    }
  });
  //初始化字典 - 计费方式
  initDictOptions("billingMethod", {}, { showLoad: false }).then((res) => {
    if (res.success) {
      state.billingMethodOptions = res.result;
    }
  });
  //初始化字典 - 订单来源
  initDictOptions("orderOrigin", {}, { showLoad: false }).then((res) => {
    if (res.success) {
      state.orderOriginOptions = res.result;
    }
  });
  //初始化字典 - 开门方式
  initDictOptions("openType", {}, { showLoad: false }).then((res) => {
    if (res.success) {
      state.openTypeOptions = res.result;
    }
  });
  //初始化字典 - 支付方式
  initDictOptions("chargeType", {}, { showLoad: false }).then((res) => {
    if (res.success) {
      state.chargeTypeOptions = res.result;
    }
  });
};

const loadData = () => {
  orderDetails({ orderId: state.id }).then((res) => {
    if (res.success) {
      state.dataSource = res.result;
    }
  });
};

// 页面加载完成
onLoad(async (option) => {
  await proxy.$onLaunched;
  state.id = option.id;
  initDictConfig();
  loadData();
});

// 开锁
const openLock = (e) => {
  if (state.isSend) return;
  uni.showModal({
    title: "提示",
    content: "是否确定开锁？",
    success: function (res) {
      if (res.confirm) {
        state.isSend = true;
        openCellById([state.dataSource.cabinetId])
          .then((res) => {
            uni.showToast({
              title: res.message,
            });
          })
          .finally(() => {
            state.isSend = false;
          });
      }
    },
  });
};

// 查询状态
const checkStatus = (e) => {
  if (state.isSend) return;
  state.isSend = true;
  orderCheckStatus({ id: state.dataSource.cabinetId })
    .then((res) => {
      uni.showToast({
        title: res.message,
      });
      setTimeout(() => {
        loadData();
      }, 1000);
    })
    .finally(() => {
      state.isSend = false;
    });
};

// 拨打电话
const callPhone = () => {
  const num = state.dataSource.storageMobile;
  uni.makePhoneCall({
    phoneNumber: num.toString(), //电话号码
  });
};

// 复制数据
const copyData = (data) => {
  uni.setClipboardData({
    data,
    success: function (res) {
      uni.showToast({
        title: "复制成功",
      });
    },
  });
};
</script>

<style lang="less" scoped>
@import url("@/common/less/common.less");

.ui-list {
  .item {
    padding: 30rpx;
    border-bottom: 2rpx solid #eee;

    &:last-of-type {
      border-bottom: none;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
  }
}
</style>
